<template>
	<view>
		<!-- 搜索 -->
		<view class="search flex flexVcen">
			<view class="iconfont inview icon-back" @click="back"></view>
			<u-search v-model="searchKey" shape="square" @custom="search" @search="search" :action-style="{'color': '#fff'}"></u-search>
		</view>
		<!-- tab -->
		<!-- 选项栏 -->
		<view class="tab">
			<u-tabs active-color="#b22726" :list="tabList" :is-scroll="false" :current="current" @change="tabschange"></u-tabs>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view v-show="(this.current === 0)">
				    <u-empty mode="list" text="医学故事为空" marginTop="240" v-show="(this.HistoryList.length == 0)"></u-empty>
					<Medical :list="HistoryList" :id="0"></Medical>
			</view>
		    <view v-show="(this.current === 1)">
				 <u-empty mode="list" text="医学常识为空" marginTop="240" v-show="(this.MedicalList.length == 0)"></u-empty>
		    		<Medical :list="MedicalList" :id="1"></Medical>
		    </view>
		</view>
		<!-- 返回头部 -->
		<view class="backTop" @click="backTop" v-show="(scrollTop > 300)">
			<u-icon size="40" name="arrow-upward"></u-icon>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { MedicalList, MedicalListStory} from '../../api/medical'
	import Medical from '../../components/medical.vue'
	export default {
		data() {
			return {
				searchKey: '',
				current: 0,
				params: {
					name: '',
					pageSize: 11,
					pageNum: 1
				},
				scrollTop: 0,
				MedicalList: [],
				HistoryList: [],
				tabList: [{name: '红色故事' }, {name: '医学常识'}],
			};
		},
		watch: {
			searchKey(data) {
				if (data === '') {
					this.params = {
					name: '',
					pageSize: 11,
					pageNum: 1
				}
					if (this.current == 0) {
						this.getHistoryList()
					} else {
						this.getMoreMedical()
						
					}
				}
			}
		},
		onReachBottom() {
			if (this.current == 0) {
				this.getMoreHistory()
			} else {
				this.getMoreHistory()
			}
		},
		onPageScroll(e) {
		  this.scrollTop = e.scrollTop
		},
		components: {
			Medical
		},
		mounted() {
			this.getHistoryList()
		},
		methods: {
			// 开始搜索
			search () {
				this.params.name = this.searchKey
				this.pageNum = 1
				this.$nextTick(() => {
					if (this.current == 0) {
						this.HistoryList = []
						this.getHistoryList()
					} else {
						this.MedicalList = []
						this.getMedicalList()
					}
					
				})
				
		  },
		  // 获取红医故事列表
		  async getHistoryList () {
			 const res = await MedicalListStory(this.params)
			 this.HistoryList = res.data.data.data
		  },
		  // 获取去红医故事
		  async getMoreHistory () {
			this.params.pageNum++ 
			const res = await MedicalListStory(this.params)
			if (res.data.data.data.length == 0) {
					this.$refs.uToast.show({
						 positiob: 'top',
						title: '没有更多数据了'
					}) 
			} else {
				 this.HistoryList = [...this.HistoryList, ...res.data.data.data]
			}
		  },
		  // 获取更多的医学常识
		  async getMoreMedical () {
			 this.params.pageNum++ 
			 const res = await MedicalList(this.params)
			 if (res.data.data.data.length == 0) {
				this.$refs.uToast.show({
					 positiob: 'top',
					title: '没有更多数据了'
				}) 
			 } else {
				  this.MedicalList = [...this.MedicalList, ...res.data.data.data ]
			 }
		  },
		  // 获取医学常识列表
		  async getMedicalList () {
			   this.params.name = ''
			  const res = await MedicalList(this.params)
			  this.MedicalList = res.data.data.data
		  },
		  // tab 栏变化
		  tabschange (e) {
			 this.current = e 
			 this.searchKey = '',
			 this.params = {
					name: '',
					pageSize: 12,
					pageNum: 1
				}
			this.backTop()
			 if (e === 0) {
				 this.getHistoryList()
			 } else {
				 this.getMedicalList()
			 }
		  },
		  // 返回顶部
		  backTop () {
		  	uni.pageScrollTo({
		  	scrollTop: 0, //距离页面顶部的距离
		  	duration: 300
		  	});
		  },
		  // 返回上一级
		  back () {
		  	uni.navigateBack({
		  		delta: 1
		  	})
		  }
		}
	}
</script>

<style lang="scss" scoped>
/* 景点搜索 */
.search {
	background-color: $theme-color;
}
</style>
